<template>
    <el-row>
        <!--工具条-->
        <el-col :span="64" class="toolbar" style="padding-bottom: 0px;with:100%;height:100%">
            <el-form :inline="true" :model="filters" ref="filters">
                <el-form-item>
                    <el-input placeholder="属性" v-model="filters.keyword1"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" v-on:click="getFormData1">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" class="el-icon-plus" v-on:click="dialogFormVisible1 = true">新增</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" class="el-icon-delete" @click="delAttr">删除</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-col>
            <el-table
                    v-loading="listLoading" element-loading-text="拼命加载中"
                    :data="tableData1"
                    @selection-change="handleSelectionChange1">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="id">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="属性名称">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="180px" align="center">
                    <template slot-scope="scope">
                        <el-button @click.native="selDetails(scope.row.id)" type="text" size="small">属性明细</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>

        <el-col>
            <div class="block" style="float: right;margin-right: 10px;margin-top: 10px;">
                <el-pagination
                        @size-change="handleSizeChange1"
                        @current-change="handleCurrentChange1"
                        :current-page="startPage1"
                        :page-sizes="pageSizes1"
                        :page-size="pageSize1"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total1">
                </el-pagination>
            </div>
        </el-col>

        <!-- 新增属性 -->
        <el-dialog title="新增属性" :visible.sync="dialogFormVisible1">
            <div style="width:60%;margin: 0 auto">
                <el-form ref="attr" :model="attr" :inline="false" label-width="90px" class="demo-ruleForm">
                    <el-form-item label="属性名称" prop="name" :rules="[{ required: true, message: '请输入属性名称', trigger: 'blur' }]">
                        <el-input type="text" v-model="attr.name" placeholder="请输入属性名称" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button @click="resetForm('attr')">重置</el-button>
                <el-button type="primary" @click="submitForm('attr')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 属性明细 -->
        <el-dialog title="属性明细" :visible.sync="dialogTableVisible1">
            <el-form ref="detail" :model="detail" :inline="true" label-width="90px" class="demo-ruleForm">
                <el-form-item label="属性名称" prop="name" :rules="[{ required: true, message: '请输入属性明细名称', trigger: 'blur' }]">
                    <el-input type="text" v-model="detail.name" placeholder="请输入属性明细名称" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="el-icon-arrow-right" type="primary" @click="submitForm1('detail')">新增</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" class="el-icon-delete" @click="delDetails()">删除</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="tableData2" @selection-change="handleSelectionChange2">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column property="id" label="id"></el-table-column>
                <el-table-column property="name" label="属性明细名称"></el-table-column>
            </el-table>
            <div class="block" style="float: right;margin-right: 10px">
                <el-pagination
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        :current-page="startPage2"
                        :page-sizes="pageSizes2"
                        :page-size="pageSize2"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total2">
                </el-pagination>
            </div>
        </el-dialog>
    </el-row>


</template>

<script>
    export default {
        data() {
            return {
                filters: {
                    keyword1: '',
                    keyword2: ''
                },
                attr: {
                    name: ''
                },
                detail: {
                    name: ''
                },
                listLoading: false, // 加载等待
                pageSizes1: [30, 50, 80, 100],
                pageSizes2: [5, 10],
                startPage1: 1,
                startPage2: 1,
                pageSize1: 30,
                pageSize2: 5,
                total1: 0,
                total2: 0,
                tableData1: [],
                tableData2: [],
                page1: 1,
                page2: 1,
                dialogTableVisible1: false,
                dialogFormVisible1: false,
                dialogFormVisible2: false,
                innerVisible: false,
                attrIds: [], // 属性ids集合
                detailIds: [], // 属性明细ids
                attrId: ''
            }
        },
        methods: {
// 查询属性
            async getFormData1() {
                
                this.listLoading = true
                let params = {
                    startPage: this.startPage1,
                    pageSize: this.pageSize1,
                    keyword: this.filters.keyword1
                }
                let data = this.postdata('SysApi/v1/findAttributesByPage', params)

                if (!data.data) {
                    this.listLoading = false
                    return
                }

                if (data.data.status === 200) {
                    this.tableData1 = data.data.data
                    this.total1 = data.data.total
                } else {
                    this.message(true, data.data.msg, 'error')
                    this.formData1 = []
                }
                this.listLoading = false
            },
// 添加属性表单提交
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addAttr()
                    } else {
                        console.log('error submit!!');
                        return false
                    }
                })
            },
// 重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
// 新增属性
            async addAttr() {
                
                let params = {
                    name: this.attr.name
                }
                let data = this.postdata("SysApi/v1/addAttributes", params)

                if (!data.data) {
                    return
                }

                if (data.data.status === 200) {
                    this.resetForm('attr')
                    this.message(true, data.data.msg, 'success')
                    this.getFormData1()
                } else {
                    this.message(true, data.data.msg, 'error')
                }
            },
// 删除属性提示
            async delAttr() {
                if (this.attrIds.length === 0) {
                    this.message(true, '请选择需要删除的属性', 'warning')
                    return
                }
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delAttrs()
                }).catch(() => {
                    this.message(true, '已取消删除', 'warning')
                })
            },
// 删除属性
            async delAttrs() {
                
                let params = {
                    ids: this.attrIds
                }
                let data = this.postdata('SysApi/v1/delAttributes', params)

                if (!data.data) {
                    return
                }

                if (data.data.status === 200) {
                    this.message(true, data.data.msg, 'success')
                } else {
                    this.message(true, data.data.msg, 'error')
                }
                this.getFormData1()
            },
// 获取选中集
            handleSelectionChange1(val) {
                this.attrIds = []
                if (val) {
                    val.forEach(row => {
                        this.attrIds.push(row.id)
                    });
                }
            },
// 每页大小改变时触发
            handleSizeChange1(val) {
                this.pageSize1 = val
                this.getFormData1()
            },
// 当前页码改变时触发
            handleCurrentChange1(val) {
                this.startPage1 = val
                this.getFormData1()
            },

// 属性明细表单提交
            submitForm1(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addDetail()
                    } else {
                        console.log('error submit!!');
                        return false
                    }
                })
            },
// 添加属性明细
            async addDetail() {
                
                let params = {
                    id: this.attrId,
                    name: this.detail.name
                }
                let data = this.postdata('SysApi/v1/addAttributeDetail', params)

                if (!data.data) {
                    return
                }

                if (data.data.status === 200) {
                    this.resetForm('detail')
                    this.message(true, data.data.msg, 'success')
                    this.selDetails(this.attrId)
                } else {
                    this.message(true, data.data.msg, 'error')
                }
            },
// 查询属性明细
            async selDetails(id) {
                
                this.dialogTableVisible1 = true
                this.attrId = id
                let params = {
                    id: id,
                    pageSize: this.pageSize2,
                    startPage: this.startPage2
                }
                let data = this.postdata('SysApi/v1/findAttributesDetailByPage', params)

                if (!data.data) {
                    return
                }

                if (data.data.status === 200) {
                    this.tableData2 = data.data.data
                    this.total2 = data.data.total
                } else {
                    this.message(true, data.data.msg, 'error')
                    this.formData2 = []
                }
            },
// 删除属性明细
            async delDetails() {
                
                if (this.detailIds.length === 0) {
                    this.message(true, '请选择需要删除的属性明细', 'warning')
                    return
                }

                let params = {
                    ids: this.detailIds
                }
                let data = this.postdata('SysApi/v1/delAttributeDetails', params)

                if (!data.data) {
                    return
                }

                if (data.data.status === 200) {
                    this.message(true, data.data.msg, 'success')
                } else {
                    this.message(true, data.data.msg, 'error')
                }
                this.selDetails(this.attrId)
            },
// 获取选中集
            handleSelectionChange2(val) {
                this.detailIds = []
                if (val) {
                    val.forEach(row => {
                        this.detailIds.push(row.id)
                    });
                }
            },
// 每页大小改变时触发
            handleSizeChange2(val) {
                this.pageSize2 = val
                this.selDetails(this.attrId)
            },
// 当前页码改变时触发
            handleCurrentChange2(val) {
                this.startPage2 = val
                this.selDetails(this.attrId)
            },
            /**
             * ifshow: true/false msg: message  type: error/warning/success
             */
            message(ifshow, msg, type) {
                this.$message({
                    showClose: ifshow,
                    message: msg,
                    type: type
                })
            }
        },
        mounted() {
            this.getFormData1()
        }
    }
</script>
